<template>
  <div class="custom_goods_list_tools">
    <div class="custom_goods_list_tools_content">
      <van-dropdown-menu>
        <van-dropdown-item
          v-model="value1"
          :options="option1"
          @change="goodsViewChangeHandle"
          get-container="body"
        />
        <van-dropdown-item
          v-model="value2"
          :options="option2"
          @change="goodsSortChangeHandle"
          get-container="body"
        />
      </van-dropdown-menu>
    </div>
  </div>
</template>
<script>
export default {
  name: "goodsListTools",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      value1: 0,
      value2: 0,
      option1: [
        { text: this.$t("lang.全部商品"), value: 0 },
        { text: this.$t("lang.新款商品"), value: 1 },
        { text: this.$t("lang.活动商品"), value: 2 },
      ],
      option2: [
        { text: this.$t("lang.综合排序"), value: 0 },
        { text: this.$t("lang.好评排序"), value: 1 },
        { text: this.$t("lang.销量排序"), value: 2 },
      ],
    };
  },
  methods: {
    goodsViewChangeHandle(v) {
      console.log(v);
    },
    goodsSortChangeHandle(v) {
      console.log(v);
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_goods_list_tools {
  font-size: (14 / @base);
  position: relative;
  .custom_goods_list_tools_content {
    .van-dropdown-menu__bar {
      box-shadow: none;
      height: (42 / @base);
      .van-ellipsis {
        font-size: (12 / @base);
      }
    }
  }
}
</style>
